<template>
	<main-content hasTab>
		<view class="home-body">
			<view class="count-box p-16 " v-if="useUserStore().userType==2">
				<u-subsection :list="listTab" v-model="currentTab" bg-color='rgba(0, 0, 0, 0.2)'
					inactive-color='rgba(216, 216, 216, 1)' :active-color="maiColor" @change='changeTab'></u-subsection>
				<view class="total-box grow flex justify-content items-center flex-col">
					<view class="">
						<text class="total-box-sum">
							{{totalArr[currentTab].unit=='元'?formatToMoney(countData[totalArr[currentTab].field]/100):countData[totalArr[currentTab].field]}}
						</text>
						<text class="total-box-unit">
							{{totalArr[currentTab].unit}}
						</text>
					</view>
					<text class="total-box-subTitle subTitle-color">{{totalArr[currentTab].subTitle}}</text>
				</view>
				<view class="flex flex-wrap flex-row justify-between">
					<view class="m-b-8 countList-itemBox" v-for="(item,index) in countList[listTab[currentTab].name]"
						:key="index">
						<view class="countList-item p-8">
							<view class="countList-item-val">
								{{totalArr[currentTab].unit=='元'?formatToMoney(countData[item.field]/100):countData[item.field]}}
								{{item.unit}}
							</view>
							<view class="subTitle-color countList-item-subTitle">
								{{item.subTitle}}
								<u-icon name="question-circle-fill" @tap="showTip(item.tip)" class="p-l-8"
									v-if='!$System.isEmpty(item.tip)' />
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="menu-box p-16 ">
				<view class="menu-box-group " v-for="group in menus.filter(e=>e.type==0)" :key="group.id">
					<group-title>
						<template #icon>
							<view class="main-color">
								<u-icon name="title-icon" custom-prefix="custom-icon" />
							</view>
						</template>

						{{group.name}}
					</group-title>
					<view class="flex flex-wrap p-t-8 p-b-8">
						<view class="menu-box-group-item flex flex-col justify-content items-center m-b-8"
							v-for="item in group?.children" :key="item.id" @tap="$System.goTo(item.path)">
							<u-image width="72rpx" height="72rpx" :src='menuImgList[item.name]'></u-image>
							<text class="menu-box-group-item-text p-t-8">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="foot">
				<foot-box />
			</view>
		</view>
	</main-content>
</template>
<script setup name='index'>
	import {
		reactive,
		ref,
		getCurrentInstance,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		useCommonStore
	} from '@/stores/common.js'
	import {
		useUserStore
	} from '@/stores/user.js'

	import {
		formatToMoney
	} from '@/common/common.js'
	import {
		TimeUtils
	} from '@/common/myDay.js'

	import {
		orderApi
	} from '@/common/api/order/index.js'
	import {
		profitApi
	} from '@/common/api/profit/index.js'
	import {
		agentApi
	} from '@/common/api/agent/index.js'

	const commonStore = useCommonStore()
	const {
		proxy
	} = getCurrentInstance()

	const maiColor = computed(() => {
		return proxy.$System.maiColor.value
	})
	const currentTab = ref(0)
	const listTab = ref([{
			name: '分佣',
		},
		{
			name: '今日交易'
		},
		{
			name: '代理商',
		},
		{
			name: '自有商户',
		}
	])
	const totalArr = ref([{
		field: 'sumAmt',
		subTitle: '累计结算金额',
		unit: '元'
	}, {
		field: 'tradeAmt',
		subTitle: '订单金额',
		unit: '元'
	}, {
		field: 'agentCount',
		subTitle: '代理商总数',
		unit: '户'
	}, {
		field: 'merchantCount',
		subTitle: '商户总数',
		unit: '户'
	}])
	const countList = ref({
		'分佣': [{
			field: 'balanceAmt',
			subTitle: '佣金账户余额',
			unit: '元'
		}, {
			field: 'unDrawnAmt',
			subTitle: '累计未结算金额',
			unit: '元'
		}, {
			field: 'freezeAmt',
			subTitle: '冻结金额',
			unit: '元'
		}, {
			field: 'drawnedAmt',
			subTitle: '累计已提现金额',
			unit: '元'
		}],
		'今日交易': [{
			field: 'revenueAmt',
			subTitle: '营收金额',
			unit: '元',
			tip: '营收金额=订单金额－退款金额'
		}, {
			field: 'refundAmt',
			subTitle: '退款金额',
			unit: '元'
		}],
		'代理商': [{
			field: 'merchantCount',
			subTitle: '商户总数',
			unit: '户'
		}, {
			field: 'trade',
			subTitle: '今日交易金额',
			unit: '元'
		}, {
			field: 'merchantApplyCount',
			subTitle: '进件中商户数',
			unit: '户'
		}, {
			field: 'refund',
			subTitle: '今日退款金额',
			unit: '元'
		}],
		'自有商户': [{
			field: 'merchantCountToday',
			subTitle: '今日新增商户',
			unit: '户'
		}, {
			field: 'merchantCountApply',
			subTitle: '进件中商户',
			unit: '户'
		}, {
			field: 'merchantCountLoss',
			subTitle: '流失商户',
			unit: '户',
			tip: '流失商户判断：最近7天日均交易为0'
		}, {
			field: 'merchantCountApplyed',
			subTitle: '已进件商户',
			unit: '户'
		}]
	})
	const changeTab = (val) => {
		currentTab.value = val
		console.log('currentTab.value==>', currentTab.value);
		getData()
	}

	const api = {
		getData: (data = {}) => {
			let mydata = {
				...data,
				cTimeBegin: TimeUtils.getDayStart().valueOf(),
				cTimeEnd: TimeUtils.getDayEnd().valueOf(),
				id: useUserStore().userInfo.id, //商户编号
				pageNo: 1,
				pageSize: 10,
			}
			if (currentTab.value == 0) {
				return profitApi.findId(mydata)
			}
			if (currentTab.value == 1) {
				return orderApi.getOverview(mydata)
			}
			if (currentTab.value == 2) {
				return agentApi.getOverview(mydata)
			}
			if (currentTab.value == 3) {
				return agentApi.getMerchantOverview(mydata)
			}
		},
	}

	const countData = ref({
		balanceAmt: 0, //佣金账户余额
		receivedAmt: 0, //已到账金额
		unDrawnAmt: 0, //累计未结算金额
		availableAmt: 0, //可用金额
		id: 0, //分润账户编号
		drawnedAmt: 0, //累计已提现金额
		sumAmt: 0, //累计结算金额
		freezeAmt: 0, //冻结金额

		revenueAmt: 0, //营收金额（分）
		tradeAmt: 0, //订单金额（分）
		refundAmt: 0, //退款金额（分）

		trade: 0, //今日交易（单位：分）

		agentCount: 0, //代理商总数
		merchantCount: 0, //商户总数
		merchantApplyCount: 0, //进件中商户数
		refund: 0, //今日退款（单位：分）

		merchantCountApply: 0, //进件中商户
		merchantCountLoss: 0, //流失商户
		merchantCountApplyed: 0, //已进件商户
		merchantCountToday: 0, //今日新增商户
	})

	function getData() {
		api.getData().then(res => {
			countData.value = res.data
			uni.stopPullDownRefresh();
		})
	}

	const showTip = (data) => {
		uni.showModal({
			title: '提示',
			content: data,
			showCancel: false
		})
	}

	const menuImgList = ref({
		'代理商管理': '/static/images/代理商管理.svg',
		'交易流水': '/static/images/交易流水.svg',
		'进件管理': '/static/images/进件管理.svg',
		'商户管理': '/static/images/商户管理.svg',
		'实时佣金': '/static/images/实时佣金.svg',
		'业务员管理': '/static/images/业务员管理.svg',
		'undefined': '/static/images/代理商管理.svg',
	})
	const menus = computed(() => {
		return useUserStore().getMenus()
	})
	console.log('menus==>', menus.value);
	onLoad(async (options) => {
		uni.setNavigationBarColor({
			frontColor: '#ffffff', // 导航栏标题颜色，只能是'black'或'white'
			backgroundColor: proxy.$System.maiColor.value // 导航栏背景颜色
		});
		// 动态设置标题
		// uni.setNavigationBarTitle({
		// 	title: '标题'
		// })
	})
	onReady(() => {
		getData()
	})
	onPullDownRefresh(() => {
		console.log('下拉');
		getData()
	})
</script>
<style lang='scss' scoped>
	.data-theme-agent .home-body,
	.data-theme-merchant .home-body {
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: var(--maiColor);
	}

	.data-theme-agent .home-body {
		background-image: url('/static/images/index_bg_agent.png');
	}

	.data-theme-merchant .home-body {
		background-image: url('/static/images/index_bg_mch.png');
	}

	.count-box {
		display: flex;
		flex-direction: column;
		height: 596rpx;
	}

	.total-box {
		color: #fff;
	}

	.total-box-sum {
		font-size: 64rpx;
		font-weight: 600;
	}

	.total-box-unit {
		padding-left: 20rpx;
		font-size: 36rpx;
	}

	.total-box-subTitle {
		font-size: 28rpx;
	}

	.subTitle-color {
		color: rgba(255, 255, 255, 0.5);
	}

	.countList-itemBox {
		width: calc((100% - 16rpx)/2);
	}

	.countList-item {
		border-radius: 16rpx;
		background: rgba(0, 0, 0, 0.1);
	}

	.countList-item-val {
		font-size: 32rpx;
		padding-bottom: 8rpx;
		color: rgba(255, 255, 255, 1);
	}

	.countList-item-subTitle {
		font-size: 24rpx;
	}

	.menu-box {
		border-radius: 16rpx 16rpx 0 0;
	}

	.menu-box-group-item {
		width: calc((100% - 32rpx)/3);
		margin-left: 16rpx;
		border-radius: 16rpx;
		border: 2rpx solid rgba(235, 235, 235, 1);
		background-color: #fff;
		padding: 32rpx 0;
	}

	.menu-box-group-item:nth-child(3n+1) {
		margin-left: 0;
	}

	.menu-box-group-item-text {
		font-size: 28rpx;
		color: rgba(102, 102, 102, 1);
	}

	.menu-box,
	.foot {
		background-color: rgba(246, 247, 248, 1);
	}
</style>
<style>
	page {
		background-color: rgba(246, 247, 248, 1);
	}
</style>